<div class="row">
  <div class="col-12">
    <nb-card>
      <nb-card-header>
        <div class="d-flex justify-content-between align-items-center">
          <div>
            <h5>会话管理</h5>
            <small class="text-muted" *ngIf="activeCluster">
              集群: {{ activeCluster.name }} | 活动数据库连接
            </small>
            <small class="text-muted" *ngIf="!activeCluster">
              请先选择集群
            </small>
          </div>
          <div class="d-flex align-items-center gap-2">
            <button nbButton status="primary" size="small" (click)="refresh()" [disabled]="loading || !clusterId">
              <nb-icon icon="refresh-outline"></nb-icon>
              刷新
            </button>
            
            <nb-select 
              [(selected)]="selectedRefreshInterval" 
              size="small" 
              placeholder="间隔"
              (selectedChange)="onRefreshIntervalChange($event)"
              [disabled]="!clusterId"
              style="min-width: 90px;"
            >
              <nb-option *ngFor="let option of refreshIntervalOptions" [value]="option.value">
                {{ option.label }}
              </nb-option>
            </nb-select>
            
            <button 
              nbButton 
              [status]="autoRefresh ? 'success' : 'basic'" 
              size="small" 
              (click)="toggleAutoRefresh()"
              [disabled]="!clusterId"
            >
              <nb-icon [icon]="autoRefresh ? 'checkmark-circle-2-outline' : 'pause-circle-outline'"></nb-icon>
              {{ autoRefresh ? '停止' : '自动' }}
            </button>
          </div>
        </div>
      </nb-card-header>
      <nb-card-body>
        <div *ngIf="loading" class="text-center py-4">
          <nb-spinner size="large" status="primary"></nb-spinner>
          <p class="mt-3 text-muted">Loading sessions...</p>
        </div>

        <div *ngIf="!loading && sessions.length === 0">
          <nb-alert status="info">
            <p class="mb-0">
              <nb-icon icon="info-outline"></nb-icon>
              No active sessions found.
            </p>
          </nb-alert>
        </div>

        <ng2-smart-table
          *ngIf="!loading && sessions.length > 0"
          [settings]="settings"
          [source]="source"
          (delete)="onDelete($event)"
        ></ng2-smart-table>
      </nb-card-body>
    </nb-card>
  </div>
</div>

